{% extends "correspondence/base.html" %}

{% block page_link %}
    <script src="../../static/correspondence/js/edit_draft.js"></script>
    <link rel="stylesheet" href="../../static/announcements/css/style.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <script src="../../static/public_file/js/wangEditor.min.js" type="text/javascript" charset="UTF-8"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        .search{
            width: 95%;
            display: flex;
            float: right;
            margin: 5.5px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }
        .search input{
            vertical-align:middle;
            float: left;//左浮动
            flex: 4;
            height: 29px;
            width: 77%;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2
            padding-left: 10px;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
        }
        .search button{
            float: right;
            flex: 1;
            height: 29px;
            line-height: 29px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 5px;
            border-top-right-radius: 5px;
        }
        .search button i{
            font-style: normal;
        }
        .search button:hover{
            font-size: 16px;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #78C3F3;
            color: #00688B;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        input{
            padding: 8px 10px 8px 40px;
        }
        .li-class {
            list-style: none;
            margin-top: 2%;
            color: #0b0b0b;
            cursor: pointer;
        }
        .add_background {
            background: #A9A9A9;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="drafts.html" style="color: #0b0b0b;">
                <i class="iconfont icon-tongzhigonggao"></i>
                <span> 草稿箱</span> <span> > </span> <a href="#"> 编辑草稿</a>
            </a>
        </div>
        <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="add_station" type="button" class="btn btn-default add-station" onclick="send_message()">发送</button>
        </div>
          <div style="width: 7%;text-align: center;height: 100%;line-height: 40px;float: right;">
            <button style="height: 30px;width: 90%;background: #0070c1;color: #ffffff;border-radius: 3px" id="save_station" type="button" class="btn btn-default add-station" onclick="edit_draft()">保存草稿</button>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 93%;padding: 0 30px 0 15px;overflow: auto;">
        <div style="margin-top: 3%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 收信人账号：</label>
            <input id="recipient" onclick="entrust()" data-toggle="modal" data-target=".bd-example-modal-xl" class="form-control section-input" type="text" placeholder=" 收信人账号" style="width: 80%;padding-left: 1%;" value="{{ recipient }}">
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;">*</span>
            <label> 信 件 主 题：</label>
            <input id="title" class="form-control section-input" type="text" placeholder=" 信 件 主 题" style="width: 80%;padding-left: 1%;" value="{{ title }}">
        </div>


        <div id="receive" style="width: 100%;margin-top: 2%;">
            <span style="color: red;">*</span>
            <label style="vertical-align: top;"> 信 件 内 容：</label>
            <div id="summernote" style="width: 80%;display: inline-block;vertical-align: top;">
                {% autoescape off %}
                    {{ message_content }}
                {% endautoescape %}
            </div>
        </div>

        <div id="message_id" style="width: 100%;margin-top: 2%;display:none;">{{ message_id }}</div>


        <div style="margin-top: 3%;margin-left: 0%;width:100%;">
            <label style="vertical-align: top;">&nbsp;附&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;件：</label>
            <a href="javascript:;" class="file" style="display: inline-block;vertical-align: top;">
                上传附件
                <input type="file" name="accessory" id="file" onchange="upload_accessory()">
            </a>
        </div>

        <div style="margin-top: 2%;width: 100%;">
            <span style="color: red;visibility: hidden;">*</span>
            <div style="border: #00d0ff solid 1px;display: inline-block;vertical-align: top;width: 86%;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;">
                    <thead>
                        <tr>
                            <th scope="col" style="width: 3%;">序号</th>
                            <th scope="col" style="width: 30%;">文件名称</th>
                            <th scope="col" style="width: 8%;">文件大小</th>
                            <th scope="col" style="width: 10%;">上传时间</th>
                            <th scope="col" style="width: 8%;">上传人员</th>
                            <th scope="col" style="width: 8%;">操作</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table">
                    </tbody>
                </table>
            </div>
        </div>

        <div style="height: 50px;">

        </div>
    </div>

    <div style="z-index: 11000" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-xl" style="margin-top: 3%;">
            <div class="modal-content"
                 style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
                <div class="modal-header" style="height: 50px;">
                    <h5 id="model_title" class="modal-title" style="line-height: 50px;width: 10%;margin-left: 2%;">选择接收人</h5>
                    <button id="close-model" type="button" class="close" data-dismiss="modal" aria-label="Close"
                            style="margin-right: 3%;line-height: 50px;">
                        <span aria-hidden="true" style="font-size: 28px;"><i class="iconfont icon-quchu"></i></span>
                    </button>
                </div>
                <div class="modal-body" style="height: 200px;padding: 1%;">
                    <div style="display: inline-block;width: 30%;height: 100%;border-right: #E8E8E8 solid 1px;">
                        <div style="width: 100%;height: 35px;color: #0b0b0b;text-align: center;">
                            <div class="search" style="vertical-align: center;">
                                <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                                <button id="search_button">搜索</button>
                            </div>
                        </div>
                        <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;color: #0b0b0b;border-bottom: #cfcfcf solid 1px;">
                            <div id="an_branch"
                                 style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;color: #01aaed;">
                                按部门
                            </div>
                            <div id="an_rank"
                                 style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按权限
                            </div>
                            <div id="an_func"
                                 style="width: 31.5%;display: inline-block;cursor: pointer;text-align: center;">按职能
                            </div>
                        </div>
                        <div id="department_list" style="width: 100%;height: 85%;overflow: auto;">
                            <div style="width: 100%;height: 100%;text-align: center;">
                                <img style="width: 30%;height: 30%;margin-top: 35%;" src="../../static/public_file/images/jiazai.gif" alt="">
                            </div>
                        </div>
                    </div>

                    <div style="display: inline-block;width: 69%;height: 100%;overflow: auto;vertical-align: top;left: 0;">
                        <table class="table table-hover table-bordered"
                               style="border-collapse: collapse;margin: 0;padding: 0;">
                            <thead>
                            <tr>
                                <th scope="col" style="width: 10%;">
                                    <input id="all_select_checkbox" type="checkbox">
                                </th>
                                <th scope="col" style="width: 20%;">序号</th>
                                <th scope="col" style="width: 35%;">姓名</th>
                                <th scope="col" style="width: 35%;">工号</th>
                            </tr>
                            </thead>
                            <tbody style="overflow: auto;" id="t_table2"></tbody>
                        </table>
                        <div id="img-display1" style="width: 75%;text-align: center;">
                            <div style="margin-top: 10%;">
                                <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                                <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                            </div>
                        </div>
                    </div>

                    <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;display: none;">
                        <div id="checked-label" style="margin-top: 1%;margin-left: 3%;width: 90%;">

                        </div>
                    </div>

                </div>
                <div class="modal-footer" style="height: 50px;">
                    <button onclick="summit_val()" id="model-affirm" type="button" class="btn btn-primary" style="margin-left: 2%;margin-right: 2%;border-radius: 3px;height: 35px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div id="del_adjunct" style="z-index: 1000;position: fixed;background-color: rgba(36, 36, 36, 0.5);width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;display: none;">
        <div style="top: 50%;left: 50%;width: 400px;height: 150px;background: white;transform:translate(-50%,-50%);border: #dfdfdf solid 1px;position: absolute;border-radius: 4px;">
            <div style="width: 100%;height: 100px;text-align: center;line-height: 100px;">请查看附件，删除无用的附件！</div>
            <hr>
            <div style="width: 100%;height: 50px;text-align: right;padding-right: 5%;">
                <button onclick="del_adjunct_button()" style="width: 50px;height: 30px;line-height: 30px;margin-top: 10px;background: #00a0e9;color: white;border-radius: 4px;border: #00a0e9 solid 1px;">确认</button>
            </div>
        </div>
    </div>
{% endblock %}




{% block script %}
    <script>
        const E = window.wangEditor;
        const editor = new E("#summernote");
        // 或者 const editor = new E(document.getElementById('div1'))
        editor.config.uploadImgShowBase64 = 'true';
        editor.placeholder = "qin";
        editor.config.zIndex = 1;
        editor.create();

        create_file();
        function create_file() {
            var file_list = {{ file_list | safe }};
            console.log(file_list)
            var t_table = document.getElementById("t_table");
            for (var i=0; i<file_list.length; i++){
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");
                td.innerHTML=i+1;td.style.textAlign="center";
                td1.innerHTML=file_list[i]["file_name"];td1.style.paddingLeft = "1%";
                td2.innerHTML=file_list[i]["file_size"];td2.style.textAlign="center";
                td3.innerHTML=file_list[i]["upload_time"];td3.style.textAlign="center";
                td4.innerHTML=file_list[i]["upload_people"];td4.style.textAlign="center";
                td5.innerHTML="<a href='" + file_list[i]["file_path"] + "'>下载</a> | <a style='color: red;' href='#' onclick='RemoveTr(this)'>删除</a> | <a target='_blank' style='color: dodgerblue;' href='"+file_list[i]["pdf_path"]+"'>查看</a>";
                // td5.innerHTML="<a style='color: red;' href='#' onclick='RemoveTr(this)'>删除</a> | <a target='_blank' style='color: dodgerblue;' href='"+file_list[i]["pdf_path"]+"'>查看</a>";td5.style.textAlign="center";
                tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);t_table.appendChild(tr);
            }
        }

        function del_adjunct_button() {
            document.getElementById("del_adjunct").style.display='none';
        }

        function RemoveTr(_this) {
            var table = document.getElementById("t_table");
            var trNode = $(_this).parent().parent();
            trNode.remove();

            for (var i = 0; i < table.children.length; i++) {
                table.children[i].children[0].innerHTML = i + 1;
            }

        }

        if (window.location.href.split("recipient=").length>1){
            document.getElementById('recipient').value = window.location.href.split("recipient=")[1];
            document.getElementById('recipient').setAttribute("disabled", "ture");
        }

        // 上传附件
        function upload_accessory() {
            var form = new FormData();
            var files = document.getElementById("file").files[0];
            form.append("file", files);

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/correspondence/upload_accessory", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        creat_table(JsonDate["data"][0])
                    }
                }
            };
        }

        // 创建附件列表
        function creat_table(JsonData) {
            var t_table = document.getElementById("t_table");
            var local_host = window.location.host;
            if (Array.isArray(JsonData["pdf_path"])){
                for (var i=0; i<JsonData["pdf_path"].length; i++){
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");var td6 = document.createElement("td");
                    td1.innerHTML = t_table.children.length+1;td1.style.textAlign = "center";
                    td2.innerHTML = JsonData["file_name"];td2.style.paddingLeft = "1%";
                    td3.innerHTML = JsonData["file_size"];td3.style.paddingLeft = "1%";
                    td4.innerHTML = JsonData["upload_time"];td4.style.textAlign = "center";
                    td5.innerHTML = "{{ realname }}";td5.style.textAlign = "center";
                    td6.innerHTML = "<a href='" + "/announcements/file_download?file_path=" + JsonData["file_url"] + "'>下载</a> | <a style='color: red;' href='#' onclick='RemoveTr(this)'>删除</a> | <a target='_blank' style='color: dodgerblue;' href='"+JsonData["pdf_path"][i]+"'>查看</a>";
                    td6.style.textAlign = "center";
                    tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td6);
                    t_table.appendChild(tr);
                }
                if (JsonData["pdf_path"].length > 1){
                    document.getElementById("del_adjunct").style.display='block';
                }
            }else {
                var tr = document.createElement("tr");
                var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");var td6 = document.createElement("td");
                td1.innerHTML = t_table.children.length+1;td1.style.textAlign = "center";
                td2.innerHTML = JsonData["file_name"];td2.style.paddingLeft = "1%";
                td3.innerHTML = JsonData["file_size"];td3.style.paddingLeft = "1%";
                td4.innerHTML = JsonData["upload_time"];td4.style.textAlign = "center";
                td5.innerHTML = "{{ realname }}";td5.style.textAlign = "center";
                td6.innerHTML = "<a href='" + "/announcements/file_download?file_path=" + JsonData["file_url"] + "'>下载</a> | <a style='color: red;' href='#' onclick='RemoveTr(this)'>删除</a> | <a target='_blank' style='color: dodgerblue;' href='"+JsonData["pdf_path"]+"'>查看</a>";
                td6.style.textAlign = "center";
                tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td6);
                t_table.appendChild(tr);
            }
        }



        function entrust() {
            sessionStorage.clear();
            document.getElementById("an_branch").style.color = "#01aaed";
            document.getElementById("an_rank").style.color = "#0b0b0b";
            document.getElementById("an_func").style.color = "#0b0b0b";
            document.getElementById("all_select_checkbox").checked = false;
            var check_box_list = document.getElementsByClassName("check_box");
            document.getElementById("search_button").setAttribute("onclick", "search_data()");
            document.getElementById("an_branch").setAttribute("onclick", "change_left_val(this.id)");
            document.getElementById("an_rank").setAttribute("onclick", "change_left_val(this.id)");
            document.getElementById("an_func").setAttribute("onclick", "change_left_val(this.id)");
            for (var t = 0; t < check_box_list.length; t++) {
                document.getElementById(check_box_list[t].id).checked = false;
            }
            document.getElementById("checked-label").innerHTML = "";

            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            if (window.branch_list) {
                var branch_list = window.branch_list;
                var department_list = document.getElementById("department_list");
                department_list.innerHTML = "";
                var ul_tag = document.createElement("ul");
                ul_tag.style.fontSize = "0";
                ul_tag.style.margin = "0";
                ul_tag.style.padding = "0";
                for (var i = 0; i < branch_list.length; i++) {
                    var li_tag = document.createElement("li");
                    li_tag.style.fontSize = "14px";
                    li_tag.style.margin = "0";
                    li_tag.style.padding = "0";
                    li_tag.innerHTML = "<p style='margin-left: 20%;'>" + branch_list[i] + "</p>";
                    li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "')");
                    li_tag.setAttribute("id", branch_list[i]);
                    li_tag.className = "li-class";
                    ul_tag.appendChild(li_tag);
                    department_list.appendChild(ul_tag);
                }
            } else {
                var xhr = new XMLHttpRequest();
                var local_host = window.location.host;          // 获取当前IP
                xhr.open('post', "/technological/delegation", true);
                xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status === 200) {
                            var JsonDate = JSON.parse(xhr.responseText);
                            window.personnel_list = JsonDate["data"];
                            window.emp_info_dict = JsonDate["emp_info_dict"];
                            window.people_dict = JsonDate["people_dict"];
                            window.people_dict_new = JsonDate["people_dict_new"];
                            window.branch_list = JsonDate["branch_list"];
                            window.function_list = JsonDate["function_list"];
                            var department_list = document.getElementById("department_list");
                            department_list.innerHTML = "";
                            var ul_tag = document.createElement("ul");
                            ul_tag.style.fontSize = "0";
                            ul_tag.style.margin = "0";
                            ul_tag.style.padding = "0";
                            for (var i = 0; i < JsonDate["branch_list"].length; i++) {
                                var li_tag = document.createElement("li");
                                li_tag.style.fontSize = "14px";
                                li_tag.style.margin = "0";
                                li_tag.style.padding = "0";
                                li_tag.innerHTML = "<p style='margin-left: 20%;'>" + JsonDate["branch_list"][i] + "</p>";
                                li_tag.setAttribute("onclick", "choice_peopel('" + JsonDate["branch_list"][i] + "')");
                                li_tag.setAttribute("id", JsonDate["branch_list"][i]);
                                li_tag.className = "li-class";
                                ul_tag.appendChild(li_tag);
                                department_list.appendChild(ul_tag);
                            }
                        }
                    }
                }
            }
        }

        // 删除列表
        function deltr1() {
            var tb = document.getElementById('t_table2');
            var rowNum = tb.rows.length;
            for (i = 0; i < rowNum; i++) {
                tb.deleteRow(i);
                rowNum = rowNum - 1;
                i = i - 1;
            }
        }

        function choice_peopel(choice_key, chose_id) {
            var data_str = sessionStorage.getItem(choice_key);
            var data_list = [];
            if (data_str) {
                data_list = data_str.split(",")
            }
            var emp_info_dict = window.emp_info_dict;
            document.getElementById("img-display1").style.display = "none";
            var t_table = document.getElementById("t_table2");
            if (document.getElementsByClassName("li-class add_background").length > 0) {
                var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
                document.getElementById(old_tag_id).className = "li-class";
            }
            document.getElementById(choice_key).className = "li-class add_background";
            deltr1();
            document.getElementById("all_select_checkbox").checked = false;
            document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', '" + chose_id + "')");

            for (var i = 0; i < emp_info_dict[choice_key].length; i++) {
                var elm = emp_info_dict[choice_key]
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                {#console.log('elm[i]', elm[i])#}
                td.innerHTML = "<input id='" + elm[i].real_name+"("+elm[i].job_number+')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
                td.style.textAlign = "center";
                td1.innerHTML = i + 1;
                td1.style.textAlign = "center";
                td2.innerHTML = elm[i].real_name;
                td2.title = elm[i].real_name;
                td2.style.textAlign = "center";
                td3.innerHTML = elm[i].job_number;
                td3.title = elm[i].job_number;
                td3.style.textAlign = "center";
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                t_table.appendChild(tr);
            }

            var tttt = 0;
            if (data_list) {
                if (data_list[0] === "all") {
                    document.getElementById("all_select_checkbox").checked = true;
                    tttt = 1
                }
            }
            for (var III = tttt; III < data_list.length; III++) {
                document.getElementById(data_list[III].trim()).checked = true;
            }
        }

        // 选择委托人
        function choice_consignor(ele_id, chose_id, choice_key) {
            chose_id = 'executor2';
            if (chose_id === "executor2" || chose_id === "executor4") {
                var dataStr = sessionStorage.getItem(choice_key);
                var dataList = [];
                if (dataStr) {
                    sessionStorage.setItem(choice_key, dataStr + ", " + ele_id)
                } else {
                    sessionStorage.setItem(choice_key, ele_id)
                }

                if (chose_id === "executor2") {
                    var tag_id = "executor_str";
                } else {
                    tag_id = "executor_str1";
                }
                var executor_str = document.getElementById(tag_id);
                if (executor_str) {
                    if (document.getElementById(ele_id).checked) {
                        if (executor_str.innerText.trim()){
                            document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + ele_id;
                        }else {
                            document.getElementById(tag_id).innerHTML = ele_id;
                        }
                    } else {
                        var str_push = [];
                        var executor_list = executor_str.innerText.split(", ");
                        for (var kl = 0; kl < executor_list.length; kl++) {
                            if (executor_list[kl] !== ele_id) {
                                str_push.push(executor_list[kl])
                            }
                        }
                        document.getElementById(tag_id).innerHTML = str_push.join(", ")
                    }
                } else {
                    document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + ele_id + "</span>";
                }
            } else {
                check_more_one_not(ele_id);
                document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;'>" + ele_id + "</span>";
            }

        }

        // 复选框全选
        function check_all_select(choice_key, chose_id) {
            var select_check = document.getElementById("all_select_checkbox").checked;
            var all_check_box = document.getElementsByClassName("check_box");
            chose_id = 'executor2'
            if (chose_id === "executor2") {
                var tag_id = "executor_str";
            } else {
                tag_id = "executor_str1";
            }

            var executor_list = [];
            var executor_str = document.getElementById(tag_id);
            if (executor_str) {
                if (executor_str.innerText.trim()) {
                    executor_list = executor_str.innerText.split(", ")
                }
            }

            var new_check_val_list = [];
            var check_val_list = [];
            for (var HH = 0; HH < all_check_box.length; HH++) {
                all_check_box[HH].checked = true;
                check_val_list.push(all_check_box[HH].id);
                if (executor_list.lastIndexOf(all_check_box[HH].id) === -1) {
                    new_check_val_list.push(all_check_box[HH].id)
                }
            }

            if (select_check) {
                if (chose_id === "executor2" || chose_id === "executor4") {

                    if (executor_str) {
                        if (executor_str.innerText.trim()) {
                            document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + new_check_val_list.join(", ");
                        } else {
                            document.getElementById(tag_id).innerHTML = new_check_val_list.join(", ");
                        }

                    } else {
                        document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + check_val_list.join(", ") + "</span>";
                    }
                    sessionStorage.setItem(choice_key, "all" + ", " + check_val_list.join(", "))
                } else {
                    alert("该节点不能多选！");
                    document.getElementById("all_select_checkbox").checked = false;
                }
            } else {
                sessionStorage.removeItem(choice_key);
                check_val_list = [];
                for (var II = 0; II < all_check_box.length; II++) {
                    all_check_box[II].checked = false;
                    check_val_list.push(all_check_box[II].id);
                }
                var old_check_val = document.getElementById(tag_id).innerHTML.split(", ");
                console.log(old_check_val)
                for (var TB = 0; TB < check_val_list.length; TB++) {
                    removeByValue(old_check_val, check_val_list[TB])
                }

                document.getElementById(tag_id).innerHTML = old_check_val.join(", ");
            }
        };

        function removeByValue(arr, val) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] === val) {
                    arr.splice(i, 1);
                    break;
                }
            }
        };

        function change_left_val(ele_id) {
            if (ele_id === "an_rank") {
                document.getElementById("an_branch").style.color = "#0b0b0b";
                document.getElementById("an_func").style.color = "#0b0b0b";
                document.getElementById(ele_id).style.color = "#01aaed";
                deltr1();
                document.getElementById("img-display1").style.display = "inline-block";
                document.getElementById("department_list").innerHTML = "";
                var new_branch_list = ["书记、院长:A", "院领导:B", "职能科室负责人:C", "临床医技科室负责人:D", "副主任:G", "护士长:E","普通员工:F"];
                var new_department_list = document.getElementById("department_list");
                var new_ul_tag = document.createElement("ul");
                new_ul_tag.style.fontSize = "0";
                new_ul_tag.style.margin = "0";
                new_ul_tag.style.padding = "0";
                for (var EF = 0; EF < new_branch_list.length; EF++) {
                    var new_li_tag = document.createElement("li");
                    new_li_tag.style.fontSize = "14px";
                    new_li_tag.style.margin = "0";
                    new_li_tag.style.padding = "0";
                    new_li_tag.style.paddingLeft = "5%";
                    new_li_tag.innerHTML = "<p>" + new_branch_list[EF].split(":")[0] + "</p>";
                    new_li_tag.setAttribute("onclick", "choice_peopel_1('" + new_branch_list[EF].split(":")[1] + "')");
                    new_li_tag.setAttribute("id", new_branch_list[EF].split(":")[1]);
                    new_li_tag.className = "li-class";
                    new_ul_tag.appendChild(new_li_tag);
                    new_department_list.appendChild(new_ul_tag);
                }
            } else if (ele_id === 'an_func') {
                document.getElementById("an_branch").style.color = "#0b0b0b";
                document.getElementById("an_rank").style.color = "#0b0b0b";
                document.getElementById(ele_id).style.color = "#01aaed";
                deltr1();
                document.getElementById("img-display1").style.display = "inline-block";
                document.getElementById("department_list").innerHTML = "";
                var department_list_1 = document.getElementById("department_list");
                var ul_tag_1 = document.createElement("ul");
                ul_tag_1.style.fontSize = "0";
                ul_tag_1.style.margin = "0";
                ul_tag_1.style.padding = "0";
                var function_list = window.function_list;
                var func_list = [];
                for (var tt in function_list['function_dict']) {
                    func_list.push(tt);
                }
                console.log(func_list)
                for (var AB = 0; AB < func_list.length; AB++) {
                    var new_li_1 = document.createElement("li");
                    new_li_1.style.fontSize = "14px";
                    new_li_1.style.margin = "0";
                    new_li_1.style.padding = "0";
                    new_li_1.style.paddingLeft = "5%";
                    new_li_1.innerHTML = "<p>" + func_list[AB] + "</p>";
                    new_li_1.setAttribute("onclick", "choice_peopel_2('" + function_list['function_dict'][func_list[AB]] + "')");
                    new_li_1.setAttribute("id", function_list['function_dict'][func_list[AB]]);
                    new_li_1.className = "li-class";
                    ul_tag_1.appendChild(new_li_1);
                    department_list_1.appendChild(ul_tag_1);
                 }
            } else {
                document.getElementById("an_rank").style.color = "#0b0b0b";
                document.getElementById("an_func").style.color = "#0b0b0b";
                document.getElementById(ele_id).style.color = "#01aaed";
                deltr1();
                document.getElementById("img-display1").style.display = "inline-block";
                document.getElementById("department_list").innerHTML = "";
                var branch_list = window.branch_list;
                var department_list = document.getElementById("department_list");
                department_list.innerHTML = "";
                var ul_tag = document.createElement("ul");
                ul_tag.style.fontSize = "0";
                ul_tag.style.margin = "0";
                ul_tag.style.padding = "0";
                for (var i = 0; i < branch_list.length; i++) {
                    var li_tag = document.createElement("li");
                    li_tag.style.fontSize = "14px";
                    li_tag.style.margin = "0";
                    li_tag.style.padding = "0";
                    li_tag.innerHTML = "<p style='margin-left: 20%;'>" + branch_list[i] + "</p>";
                    li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "')");
                    li_tag.setAttribute("id", branch_list[i]);
                    li_tag.className = "li-class";
                    ul_tag.appendChild(li_tag);
                    department_list.appendChild(ul_tag);
                }
            }
        }

        // 创建右侧选择人员列表
        function choice_peopel_1(choice_key, chose_id) {
            var data_str = sessionStorage.getItem(choice_key);
            var data_list = [];
            if (data_str) {
                data_list = data_str.split(",")
            }
            var people_dict = window.people_dict;
            var people_dict_new = window.people_dict_new;
            document.getElementById("img-display1").style.display = "none";
            var t_table = document.getElementById("t_table2");
            if (document.getElementsByClassName("li-class add_background").length > 0) {
                var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
                document.getElementById(old_tag_id).className = "li-class";
            }
            document.getElementById(choice_key).className = "li-class add_background";
            deltr1();
            document.getElementById("all_select_checkbox").checked = false;
            document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
            for (var i = 0; i < people_dict_new[choice_key].length; i++) {
                var elm = people_dict_new[choice_key];
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                {#console.log('elm[i]', elm[i])#}
                td.innerHTML = "<input id='" + elm[i].real_name+'('+elm[i].job_number+')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
                td.style.textAlign = "center";
                td1.innerHTML = i + 1;
                td1.style.textAlign = "center";
                td2.innerHTML = elm[i].real_name;
                td2.title = elm[i].real_name;
                td2.style.textAlign = "center";
                td3.innerHTML = elm[i].job_number;
                td3.title = elm[i].job_number;
                td3.style.textAlign = "center";
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                t_table.appendChild(tr);
            }
            var tttt = 0;
            if (data_list) {
                if (data_list[0] === "all") {
                    document.getElementById("all_select_checkbox").checked = true;
                    tttt = 1
                }
            }
            for (var III = tttt; III < data_list.length; III++) {
                document.getElementById(data_list[III].trim()).checked = true;
            }
        }

        // 创建右侧选择人员列表
        function choice_peopel_2(choice_key, chose_id) {
            var data_str = sessionStorage.getItem(choice_key);
            var data_list = [];
            if (data_str) {
                data_list = data_str.split(",")
            }

            var people_dict_new = window.function_list;
            document.getElementById("img-display1").style.display = "none";
            var t_table = document.getElementById("t_table2");
            if (document.getElementsByClassName("li-class add_background").length > 0) {
                var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
                document.getElementById(old_tag_id).className = "li-class";
            }
            document.getElementById(choice_key).className = "li-class add_background";
            deltr1();
            document.getElementById("all_select_checkbox").checked = false;
            document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
            for (var i = 0; i < people_dict_new[choice_key].length; i++) {
                var elm = people_dict_new[choice_key];
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var td1 = document.createElement("td");
                var td2 = document.createElement("td");
                var td3 = document.createElement("td");
                {#console.log('elm[i]', elm[i])#}
                td.innerHTML = "<input id='" + elm[i].real_name + '(' + elm[i].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
                td.style.textAlign = "center";
                td1.innerHTML = i + 1;
                td1.style.textAlign = "center";
                td2.innerHTML = elm[i].real_name;
                td2.title = elm[i].real_name;
                td2.style.textAlign = "center";
                td3.innerHTML = elm[i].job_number;
                td3.title = elm[i].job_number;
                td3.style.textAlign = "center";
                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);
                t_table.appendChild(tr);
            }
            var tttt = 0;
            if (data_list) {
                if (data_list[0] === "all") {
                    document.getElementById("all_select_checkbox").checked = true;
                    tttt = 1
                }
            }
            for (var III = tttt; III < data_list.length; III++) {
                document.getElementById(data_list[III].trim()).checked = true;
            }
        }

        function summit_val() {
            var executor111 = '';
            var checked_label = document.getElementById("checked-label");
            for (var j = 0; j < checked_label.children.length; j++) {
                executor111 = executor111 + checked_label.children[j].innerText.trim() + ", ";
            }
            document.getElementById("close-model").click();
            var executor_people = executor111.slice(0, -2);
            document.getElementById("recipient").value=executor_people;
        }

        function search_data() {
            var searchData = document.getElementById("search_data").value;
            var emp_info_dict = window.emp_info_dict;
            console.log(emp_info_dict);
            var searchValNum = 1;

            var department_list = document.getElementById("department_list");
            document.getElementById("all_select_checkbox").checked = false;
            document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('all')");
            document.getElementById("img-display1").style.display = "none";
            var t_table = document.getElementById("t_table2");
            t_table.innerHTML = '';
            for (var i in emp_info_dict){
                for (var j=0; j<emp_info_dict[i].length; j++){
                    if (emp_info_dict[i][j]["real_name"].indexOf(searchData) !== -1){
                        var elm = emp_info_dict[i];
                        var tr = document.createElement("tr");
                        var td = document.createElement("td");
                        var td1 = document.createElement("td");
                        var td2 = document.createElement("td");
                        var td3 = document.createElement("td");
                        {#console.log('elm[i]', elm[i])#}
                        td.innerHTML = "<input id='" + elm[j].real_name + "(" + elm[j].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + i + "\")'>";
                        td.style.textAlign = "center";
                        td1.innerHTML = searchValNum;
                        td1.style.textAlign = "center";
                        td2.innerHTML = elm[j].real_name;
                        td2.title = elm[j].real_name;
                        td2.style.textAlign = "center";
                        td3.innerHTML = elm[j].job_number;
                        td3.title = elm[j].job_number;
                        td3.style.textAlign = "center";
                        tr.appendChild(td);
                        tr.appendChild(td1);
                        tr.appendChild(td2);
                        tr.appendChild(td3);
                        t_table.appendChild(tr);
                        searchValNum += 1;
                    }
                }
            }
        }
    </script>
{% endblock %}
